<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东个人信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #e2231a;
            color: #fff;
            padding: 10px 20px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .logo img {
            height: 40px;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .account-info {
            margin-right: 20px;
        }

        .points {
            color: #ff6700;
            font-weight: bold;
        }

        .sidebar {
            width: 200px;
            background-color: #fff;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 60px; /* Adjust this value to move the sidebar below the header */
            bottom: 0;
            left: 0;
            overflow-y: auto;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .sidebar li {
            margin-bottom: 10px;
            cursor: pointer;
        }

        .main-content {
            margin-left: 220px;
            padding: 20px;
            margin-top: 80px; /* Adjust this value to move the main content below the header */
        }

        .basic-info {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        .form-group input[type="text"],
        .form-group select {
            width: 200px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .submit-btn {
            padding: 10px 20px;
            background-color: #e2231a;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .submit-btn:hover {
            background-color: #c41f18;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="jd_logo.png" alt="京东logo">
        </div>
        <div class="user-info">
            <div class="account-info">
                <span>账号名：</span>jd_5c5bee222ddd4
                <div class="points">京享值1735</div>
            </div>
            <div class="member-info">
                <span>小白守约：</span>开通后可查看
                <span>会员类型：</span>个人用户
            </div>
        </div>
    </div>
    <div class="sidebar">
        <ul>
            <li>个人信息</li>
            <li>账户安全</li>
            <li>我的尺码</li>
            <li>账号绑定</li>
            <li>收货地址</li>
            <li>健康档案</li>
            <li>分享绑定</li>
            <li>邮件订阅</li>
            <li>应用授权</li>
            <li>快捷支付</li>
            <li>地址管理</li>
            <li>企业发票</li>
            <li>采购需求单</li>
        </ul>
    </div>
    <div class="main-content">
        <div class="basic-info">
            <h2>基本信息</h2>
            <form>
                <div class="form-group">
                    <label for="nickname">昵称：</label>
                    <input type="text" id="nickname" name="nickname" value="jd_uiy2idz0cbwum">
                </div>
                <div class="form-group">
                    <label>性别：</label>
                    <input type="radio" id="male" name="gender" value="male">
                    <label for="male">男</label>
                    <input type="radio" id="female" name="gender" value="female">
                    <label for="female">女</label>
                    <input type="radio" id="secret" name="gender" value="secret" checked>
                    <label for="secret">保密</label>
                </div>
                <div class="form-group">
                    <label for="birthdate">生日：</label>
                    <select id="year" name="year">
                        <option value="">年</option>
                    </select>
                    <select id="month" name="month">
                        <option value="">月</option>
                    </select>
                    <select id="day" name="day">
                        <option value="">日</option>
                    </select>
                </div>
                <button type="submit" class="submit-btn">提交</button>
            </form>
        </div>
    </div>
    <script>
        // Function to populate year options
        function populateYears() {
            const yearSelect = document.getElementById('year');
            const currentYear = new Date().getFullYear();
            for (let i = currentYear; i >= 1900; i--) {
                const option = document.createElement('option');
                option.value = i;
                option.textContent = i;
                yearSelect.appendChild(option);
            }
        }

        // Function to populate month options
        function populateMonths() {
            const monthSelect = document.getElementById('month');
            for (let i = 1; i <= 12; i++) {
                const option = document.createElement('option');
                option.value = i < 10 ? '0' + i : i;
                option.textContent = i < 10 ? '0' + i : i;
                monthSelect.appendChild(option);
            }
        }

        // Function to populate day options
        function populateDays() {
            const daySelect = document.getElementById('day');
            for (let i = 1; i <= 31; i++) {
                const option = document.createElement('option');
                option.value = i < 10 ? '0' + i : i;
                option.textContent = i < 10 ? '0' + i : i;
                daySelect.appendChild(option);
            }
        }
        alert('提交成功');

        // Call the functions to populate the selects
        populateYears();
        populateMonths();
        populateDays();
        // server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = 3000;

app.use(bodyParser.urlencoded({ extended: true }));

// 模拟数据库
let users = [];

// 获取用户信息
app.get('/api/user', (req, res) => {
    res.json(users);
});

// 更新用户信息
app.post('/api/user', (req, res) => {
    const userData = req.body;
    users.push(userData);
    res.status(201).json({ message: 'User information updated successfully' });
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});
// 表单提交处理
document.querySelector('.submit-btn').addEventListener('click', function(event) {
    event.preventDefault();
    const formData = {
        nickname: document.getElementById('nickname').value,
        gender: document.querySelector('input[name="gender"]:checked').value,
        birthdate: `${document.getElementById('year').value}-${document.getElementById('month').value}-${document.getElementById('day').value}`
    };

    fetch('/api/user', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams(formData).toString()
    })
    .then(response => response.json())
    .then(data => alert(data.message))
    .catch(error => console.error('Error:', error));
});
    </script>
</body>
</html>